<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米手机商品列表</title>
    <script src="./js/vue.global.js"></script>
</head>
<style>
    /* 全局样式 */
    *{
        padding: 0px;
        margin: 0px;
    }
    a{
        color: #999;
        text-decoration: none;
    } 
    ul, ol, li {
        list-style: none;
    }
    p,h1,h2,h3{
        padding: 0px;
        margin: 0px;
    }

    /* 手机商品列表样式 */
    #goods_phone{
        width: 1226px;
        height: 686px;
        background-color:rgb(245,245,245);
        margin: 100px auto;
    }
    /* 标题样式 */
    .title{
        width: 100%;
        height: 58px;
        line-height: 58px;
        overflow: hidden;
    }
    .title>h2{
        width: 200px;
        height: 58px;
        font-size: 22px;
        color: #333333;
        float: left;
        font-weight: 200;
    }
    .more{
        width: 100px;
        height: 58px;
        float: right;
    }
    .more>a{
        font-size: 16px;
        color: #424242;
    }
    /* 列表样式 */
    #list{
        width: 100%;
        height: 640px;
    }
    .list_l{
        margin-top: 20px;
        width: 234px;
        height: 628px;
        float: left;
        transition: all 0.2s;
    }
    .list_l:hover{
        box-shadow: 1px 10px 5px 5px #d1d1d1;
        position: relative;
        top: -2px;
    }
    .list_r>ul{
        width: 980px;
        float: right;
        display: flex;
        flex-wrap: wrap;
		justify-content: space-between;
    }
    .list_r>ul>li>a{
        transition: all 0.2s;
    }
    .list_r>ul>li>a:hover{
        box-shadow: 1px 10px 5px 5px #d1d1d1;
        position: relative;
        top: -2px;
    }
</style>
<body>
    <!-- 199010127吴金昔 -->

    <!-- 手机列表 -->
    <div id="goods_phone">
        <!-- 标题 -->
        <div class="title">
            <h2>手机</h2>
            <div class="more"><a href="">查看更多></a></div>
        </div>
        <!-- 商品列表 -->
        <div id="list" >
            <div class="list_l">
                <a href="">
                    <img src="./imgaes/ad1.png" style="width: 234px; height: 614px;">
                </a>
            </div>
            <div class="list_r">
                <ul>
                    <!-- 用v-for将phone_list中的数据遍历到列表中 -->
                    <li  v-for="phone in phone_list">
                        <a :href="phone.link" style="
                        display: block;
                        width: 234px; 
                        height: 260px; 
                        background-color:rgb(255, 255, 255);
                        padding:20px 0px;
                        text-align: center;
                        margin-top: 20px;">
                            <img :src="phone.img" style="width: 160px; height: 160px;">
                            <h3 style="font-size: 14px; color: #333333; margin: 0px 10px 2px;">{{phone.name}}</h3>
                            <p style="font-size: 12px;color: #B0B0B0;margin: 0px 10px 10px;">{{phone.text}}</p>
                            <p style="font-size: 14px; color: #FF6700;">
                                {{phone.price}}
                                <span>元起</span>
                                <span style="color: #B0B0B0;margin-left: 7px;text-decoration: line-through;">{{phone.pre_price}}</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    // 创建应用实例
    Vue.createApp({
        data(){
            return{
                phone_list:[
                    {
                        img:'./imgaes/phone1.png',
                        name:'Redmi K50 电竞版',
                        text:'全血拉满的冷血旗舰',
                        price:'3299',
                        pre_price:'1999元',
                        link:'#'
                    },
                    {
                        img:'./imgaes/phone2.png',
                        name:'Xiaomi 12 Pro',
                        text:'全新晓龙8|2k AMOLED屏幕',
                        price:'4699',
                        pre_price:'',
                        link:'#'
                    },
                    {
                        img:'./imgaes/phone3.png',
                        name:'Xiaomi 12',
                        text:'全新晓龙8|5000万主摄',
                        price:'3699',
                        pre_price:'',
                        link:'#'
                    },
                    {
                        img:'./imgaes/phone4.png',
                        name:'Xiaomi 12X',
                        text:'晓龙870|5000万主摄',
                        price:'2999',
                        pre_price:'1999元',
                        link:'#'
                    },
                    {
                        img:'./imgaes/phone5.png',
                        name:'Xiaomi 11 青春活力版',
                        text:'轻薄5G，内外皆精彩',
                        price:'1899',
                        pre_price:'1999元',
                        link:'#'
                    },
                    {
                        img:'./imgaes/phone6.png',
                        name:'Redmi Note 11 Pro系列',
                        text:'三星AMOLED高刷屏',
                        price:'1799',
                        pre_price:'',
                        link:'#'
                    }
                    ,
                    {
                        img:'./imgaes/phone7.png',
                        name:'Redmi Note 11 5G',
                        text:'5000mAh大电量',
                        price:'1199',
                        pre_price:'',
                        link:'#'
                    }
                    ,
                    {
                        img:'./imgaes/phone8.png',
                        name:'Redmi Note 11 4G',
                        text:'5000mAh大电量',
                        price:'969',
                        pre_price:'999元',
                        link:'#'
                    }

                ]
            }
        }
    }).mount("#list")
</script>
</html>